<script lang="ts" setup>
import {ref} from 'vue'
import { baseInfoUpdatePasswordSerive} from '@/api/baseInfo.js'
const formModel = ref({
   oldpassword:'',
   newpassword:'',
   repassword:''
})
const formRef = ref()
const rules = {
    oldpassword:[
        {required:true,message:'请输入原密码',trigger:'blur'},
    ],
   newpassword:[
     {required:true,message:'请输入新密码',trigger:'blur'},
    {pattern:/^\S{6,15}$/,message:'密码必须是 6-15 位的非空字符',trigger:'blur'}
   ],
   repassword:[
    {required:true,message:'请再次输入新密码',trigger:'blur'},
     {pattern:/^\S{6,15}$/,message:'密码必须是 6-15 位的非空字符',trigger:'blur'},
     {
       validator:(rules:any,value:any,callback:any)=>{
           if(value !== formModel.value.newpassword){
            callback(new Error('两次输入密码不一致！，请重新输入'))
           }else{
            callback()
           }
       }
     }
   ]
}
const submit = async()=>{
   await formRef.value.validate()
   await baseInfoUpdatePasswordSerive(formModel.value)
   ElMessage.success('更换密码成功！')

}
const reset = ()=>{
    formModel.value.newpassword = ''
    formModel.value.oldpassword = ''
    formModel.value.repassword = ''
    ElMessage.success('重置成功！')
}
</script>

<template>
    <el-card>
 <div class="wrapped">
  <el-form label-width="auto" ref="formRef" :rules="rules" :model="formModel">
    
    <el-form-item label="原密码:" prop="oldpassword">
     <el-input  v-model="formModel.oldpassword"/>
    </el-form-item>
    
    <el-form-item label="新密码:"  prop="newpassword">
     <el-input v-model="formModel.newpassword" />
    </el-form-item>

<el-form-item label="确认新密码:" prop="repassword">
     <el-input  v-model="formModel.repassword"/>
    </el-form-item>
    <el-form-item >
        <div class="btn">
    <el-button type="primary" @click="submit">修改密码</el-button>
     <el-button @click="reset">重置</el-button>
        </div>
 
    </el-form-item>
 </el-form>
 </div>
     </el-card>
</template>


<style lang="scss" scoped>
.wrapped{
    height: 500px;
    .el-form{
        margin-top: 50px;
        margin-left: 20px;
        width: 400px;

        .btn{
          display: flex;
          margin: 20px 100px;
        }
    }
}
</style>